<template>
	<view class="page">
		<u-navbar fixed placeholder autoBack leftIconColor="#232832" bgColor="var(--page-bg-color)"></u-navbar>
		<c-content :top="statusBarHeight + 44">
			<view class="page-title">账号密码登陆</view>
			<u-form :model="form" ref="form">
				<u-form-item prop="username">
					<u-input placeholder="手机号/邮箱/账号" clearable maxlength="20" v-model="form.username" border="bottom"
						color="#232832"></u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input placeholder="登陆密码" clearable maxlength="20" v-model="form.password" border="bottom"
						:password="!pwd" color="#232832">
						<template #suffix>
							<view @click="pwd = !pwd">
								<u-icon :size="20" name="eye-fill" color="#c6c7cb" v-if="!pwd"></u-icon>
								<u-icon :size="20" name="eye-off" color="#c6c7cb" v-else></u-icon>
							</view>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
			<view class="btn" @click="login()">
				<view class="btn-inner">登陆</view>
			</view>
		</c-content>

		<view class="bottom" :style="{bottom: `${safeAreaBottom + 20}px`}">
			没有账号？<text @click="goSign()">注册</text>
		</view>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				pwd: false,
				form: {
					username: '',
					password: ''
				},
			}
		},
		created() {
			console.log(uni.store);
			if((uni.$store.get('username') ?? '') != '') {
				this.form.username = uni.$store.get('username')
			}
			if((uni.$store.get('password') ?? '') != '') {
				this.form.password = uni.$store.get('password')
			}
		},
		methods: {
			login() {
				if((this.form.username ?? '') == '') {
					uni.toast.show({
						title: '请输入账号'
					})
					return
				}
				if((this.form.password ?? '') == '') {
					uni.toast.show({
						title: '请输入密码'
					})
					return
				}
				this.$request.post('/login', this.form).then(res => {
					console.log('res: ',res);
					if(res.code === 200) {
						uni.store.dispatch('getInfo')
						uni.$store.set('username', this.form.username)
						uni.$store.set('password', this.form.password)
						uni.reLaunch({
							url: '/pages/tabs/index'
						})
					}
				})
			},
			goSign() {
				uni.redirectTo({
					url: '/pages/common/signup'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;

		&-title {
			margin: 50px 0 10px 15px;
			color: #232832;
			font-size: 24px;
			line-height: 28px;
			font-weight: 500;
			vertical-align: top;
		}

		.code {
			color: #6E86FF;
		}

		&::v-deep .u-form {
			width: calc(100% - 60px);
			margin: 0 30px;
		}

		.btn {
			margin: 60px 30px;
			background: #6E86FF;
			padding: 10px 0;
			border-radius: 20px;
			color: #ffffff;
			text-align: center;
			letter-spacing: 4px;
		}
	}

	.bottom {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #939393;
		font-size: 13px;
		line-height: 18px;
		font-weight: 500;

		text {
			color: #6E86FF;
		}
	}
</style>